<template>
  <div class="container">
    <el-menu :default-active="myRoutePath" router mode="vertical" background-color="#0a1a31" text-color="#fff"
      active-text-color="#ffd04b" class="el-menu-vertical-demo" @select="handleSelect">
      <template v-for='menu in Submenu'>
        <!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
        <el-submenu v-if='menu.menuChilds.length > 0 && menu.menuState === "1"' :index='menu.menuUrl' :key="menu.menuId"
          :default-active="$route.path" router>
          <template slot="title">
            <i v-if="menu.menuImgClass" :class="menu.menuImgClass"></i>
            <span slot="title">{{ menu.menuName }}</span>
          </template>
          <!-- 调用自身  此处是重点-->
          <Menu :Submenu="menu.menuChilds"></Menu>
        </el-submenu>
        <!-- 如果没有子菜单，则显示当前内容 -->
        <el-menu-item v-else :index='menu.menuUrl' :key='menu.menuId'>
          <span slot="title">{{ menu.menuName }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'Menu',
  data() {
    return {

    }
  },
  props: {
    Submenu: {
      type: Array,
      required: false,
    }
  },
  computed: {//计算属性
    myRoutePath() {//刷新后菜单路径确定
      // console.log(this.$route.path);
      return this.$route.path === '/home' ? '/home/Index/SystemPage' : this.$route.path
    }
  },
  created() {
    // console.log(Submenu);
    this.$router.replace(this.myRoutePath)
  },
  mounted() {
    // console.log(this.Submenu);
  }
  ,
  methods: {
    handleSelect(key) {
      // console.log(key);
    }
  }
}
</script>

<style scoped>
.menu-icon {
  transform: none !important;
}

::v-deep .container .el-menu {
  height: 100%;
  border: none;
}

::v-deep .el-menu {
  border-right: none;
}


.el-menu-item.is-active {
  color: #fff !important;
  background: #1cb09a !important;
}

/* 鼠标悬浮时，主菜单的样式 */
.el-menu-item:hover {
  outline: 0 !important;
  color: rgb !important;
  background: rgba(28, 176, 154, 0.3) !important;
}
</style>
